<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/markdown/css/editormd.css}"/>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">

</head>
<body>
<div id="editor">
    <textarea id="textarea" style="display: none" name="textarea"></textarea>
</div>
<br>
<div>
    <button type="button" id="button" class="layui-btn"> 提交</button>
</div>
<script th:src="@{/markdown/js/jquery.min.js}"></script>
<script th:src="@{/markdown/js/editormd.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script  th:src="@{/markdown/editormd.js}"></script>
<!--集成markdown--->
<script type="text/javascript">
    $(function () {
        var editor = editormd("editor", {
            width: "100%",
            height: "800px",
            path: "markdown/lib/",
            syncScrolling: true,
            autoFocus: false,  //页面打开时不自动获取焦点
            toolbar: true,
            emailLink: true,
            toc: true,
            matchWordHighlight: true,
            lineNumbers: true,
            taskLis: true,
            previewCodeHighlight : true,
            emoji: true,
            htmlDecode : false,
            autoLoadModules: true,
            saveHTMLToTextarea: true,// 保存 HTML 到 Textarea，true表示转化为html格式的内容也同样提交到后台
            toolbarAutoFixed: true,//工具栏自动固定定位的开启与禁用
            imageUpload: true,
            codeFold: true, //支持代码折叠
            toolbarIcons: "full",
            tocDropdown: true, //生成下拉目录
            imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL: "/imageUpload",
            onload: function () {
                initPasteDragImg(this); //图片剪切上传

            },

        });
    });

    layui.use(['layer', 'jquery'], function () {
        var lauijquery = layui.jquery,
            layer = layui.layer;

        var httpurl="http://localhost:8080";

        document.getElementById('button').addEventListener('click', function () {
            // 读取 html
            var html =window.document.getElementById("textarea").innerText;
            lauijquery.post(httpurl + "/saveMarkdown", {'value': html}, function (res) {
                if (res != null) {
                    layer.msg("提交成功", {icon: 6}, function () {
                        layer.open({
                            type: 1
                            ,
                            title: false //不显示标题栏
                            ,
                            closeBtn: false
                            ,
                            area: '300px;'
                            ,
                            shade: 0.8
                            ,
                            id: 'LAY_layuipro' //设定一个id，防止重复弹出
                            ,
                            btn: ['火速围观', '残忍拒绝']
                            ,
                            btnAlign: 'c'
                            ,
                            moveType: 1 //拖拽模式，0或者1
                            ,
                            content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">新文章：' + res.toString() + '</div>'
                            ,
                            success: function (layero) {
                                var btn = layero.find('.layui-layer-btn');
                                btn.find('.layui-layer-btn0').attr({
                                    href: httpurl + '/showFile?myfile=' + res.toString()
                                    , target: '_blank'
                                });
                            }
                        });
                    });
                } else {
                    layer.msg("提交失败", {icon: 5});
                }
            });
        }, false);

    });


</script>

</body>
</html>